<template>
    <div class='fabout-bg'>
        <div class="fabout-inner w">
            <div class="fabout-contact">
                <ul class="fabout-nav">
                    <li v-for="(nav, index) in navList" :key="index">{{nav.name}}</li>
                </ul>
                <ul class="fabout-phone">
                    <li>12345678912</li>
                    <li>renminbi@qq.com</li>
                </ul>
            </div>
            <div class="fabout-weixin">
                <img src="@/assets/img/weixin.png" alt="">
                <p>RMB官方微信</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 测试数据
            navList: [
                { name: "关于" },
                { name: "服务" },
                { name: "案例" },
                { name: "动态" },
                { name: "动态" },
                { name: "联系" }
            ]
        };
    }
};
</script>

<style lang='css' scoped>
.fabout-bg {
    height: 210px;
    background-color: #3d434f;
}
.fabout-bg .fabout-inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
}
.fabout-inner .fabout-weixin {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-top: 50px;
    width: 120px;
}
.fabout-weixin img {
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
}
.fabout-weixin p {
    display: block;
    width: 120px;
    text-align: center;
    font-size: 1.125rem;
    color: #c0c4cd;
}
.fabout-inner .fabout-contact {
    width: 890px;
}

.fabout-contact ul {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    padding: 40px 0px;
}
.fabout-contact ul li {
    float: left;
    font-size: 1.125rem;
    color: #cfd5e0;
}
.fabout-contact .fabout-nav {
    border-bottom: 1px solid #606570;
}
.fabout-nav li {
    margin-right: 45px;
    cursor: pointer;
}
.fabout-nav li:hover{
    color: #fff;
}
.fabout-phone li {
    margin-right: 35px;
    padding-left: 30px;
    height: 21px;
}
.fabout-phone li:nth-child(1) {
    background: url("../../assets/img/contact-icon.png") no-repeat 0px -19px;
}
.fabout-phone li:nth-child(2) {
    background: url("../../assets/img/contact-icon.png") no-repeat 0px 8px;
}
</style>